React カスタムフックでコンポーネントからロジックを切り離す

概要

Reactを関数コンポーネントでやり繰りする場合、useState, useReducerなどの標準フックを使うのが基本。

ただ、これで普通に続けてると、コンポーネントにビジネスロジックが入り込み、コードが複雑化するという問題が発生する。

基本的にコンポーネントは「ビュー。表示の部分」と「コンポーネント間のデータの受け渡し」の部分だけを担当して欲しいところ。

なのにも関わらず、ビジネスロジックがぐちゃぐちゃと入ってしまうと、可視性・保守性が低くなってしまう。

こういった問題を小さくするために、カスタムフックを利用すると良い。

カスタムフックとは

stateを使うロジックを共有するためのもの

カスタムフックを使う場所ごとで、stateの値や副作用は完全に独立・分離している。

code: useFriendStatus.js

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {

const isOnline, setIsOnline = useState(null);

useEffect(() => {

function handleStatusChange(status) {

setIsOnline(status.isOnline);

}

ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);

return () => {

ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);

};

});

return isOnline;

}

利用するコンポーネント

code: component.js

import {useFriendStatus} from './useFriendStatus';

const Component = () => {

const isOnline = useFriendStatus(1);

...

return (

...

)

}

参考